<template>
  <div>
    <div style="color: red" class="fix-container">
      <!-- 导航区 -->
      <ul>
        <li v-for="(discover, index) in discoverList" :key="index">
          <RouterLink
            :to="{
              path: '/discover/detail',
              query: {
                id: discover.id,
              },
            }"
          >
            {{ discover.title }}
          </RouterLink>
        </li>
      </ul>
    </div>

    <!-- 展示区 -->
    <div v-if="currentImage">
      <img :src="getAssetImage(currentImage)" alt="Image" />
    </div>
    <detail v-else />

    <RouterView></RouterView>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, onMounted } from "vue";
import { RouterLink, useRoute } from "vue-router";
import { RouterView } from "vue-router";
import detail from './detail.vue'; // 引入新的默认组件

const route = useRoute();
const currentImage = ref<string | null>(null);

const images: Record<string, string> = {
  "04": "./image/5.webp",
  "02": "./image/6.webp",
  "03": "./image/7.webp",
  "default": "./image/5.webp",
};

const getAssetImage = (imgsrc: string) => new URL(imgsrc, import.meta.url).href;

const discoverList = reactive([
  { id: "01", title: "推荐", content: "推荐" },
  { id: "02", title: "教育", content: "教育" },
  { id: "03", title: "穿搭", content: "穿搭" },
  { id: "04", title: "美食", content: "美食" },
  { id: "05", title: "彩妆", content: "彩妆" },
  { id: "06", title: "影视", content: "影视" },
  { id: "07", title: "职场", content: "职场" },
  { id: "08", title: "情感", content: "情感" },
  { id: "09", title: "家居", content: "家居" },
  { id: "10", title: "游戏", content: "游戏" },
  { id: "11", title: "旅行", content: "旅行" },
  { id: "12", title: "健身", content: "健身" },
]);

// 设置默认图片
onMounted(() => {
  const initialId = route.query.id as string;
  currentImage.value = images[initialId] || null; // 如果没有id，设置为null以显示默认组件
});

watch(
  () => route.query.id,
  (newId) => {
    if (typeof newId === "string") {
      currentImage.value = images[newId] || null;  // 根据id获取对应的图片路径
    } else {
      currentImage.value = null;  // 如果没有id，则清空
    }
  },
  { immediate: true } // 立即执行一次
);
</script>

<style scoped>
/* 整体容器样式 */
div {
  font-family: Arial, sans-serif;
}

/* 导航区样式 */
.fix-container {
  width: 100%; /* 自适应宽度 */
  background-color: #f8f9fa; /* 浅灰背景 */
  padding: 10px 20px; /* 内边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 列表样式 */
ul {
  display: flex;
  flex-direction: row;
  padding: 0; /* 去掉默认内边距 */
  margin: 0; /* 去掉默认外边距 */
}

/* 列表项样式 */
ul li {
  list-style: none;
  margin-right: 15px; /* 每个列表项之间的间距 */
  transition: transform 0.2s; /* 动效 */
}

ul li:hover {
  transform: scale(1.05); /* 鼠标悬停放大效果 */
}

/* 链接样式 */
a {
  color: #00060b; /* 黑色链接 */
  text-decoration: none; /* 去掉下划线 */
  font-weight: bold; /* 加粗字体 */
}

a:hover {
  text-decoration: underline; /* 悬停时添加下划线 */
}

/* 展示区样式 */
img {
  max-width: 100%; /* 使图片自适应 */
  height: auto; /* 保持纵横比 */
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 图片阴影 */
}


</style>